<template>
  <div class="view-xhr">
    <div class="panel-title">
      <div class="title-start">响应数据</div>
      <div class="title-end">
        <span class="span-item">
          <span>Status：</span>
          <span :class="getStatusClass(response)">{{ response.code + ' ' + response.status }}</span>
        </span>
        <span class="span-item">
          <span>Time：</span>
          <span :class="getStatusClass(response)">{{ getFormatTime(response) }}</span>
        </span>
        <span class="span-item">
          <span>Body Size：</span>
          <span :class="getStatusClass(response)">{{ getFormatSize(response) }}</span>
        </span>
      </div>
    </div>
    <div class="view-panel">
      <div class="tabs-menu">
        <el-form label-width="80px" size="mini">
          <el-form-item label="响应状态:">
            <el-select v-model="form.value" placeholder="请选择">
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <!-- <span class="menu-action">
          <i class="el-icon-plus"></i>添加
        </span> -->
      </div>
      <el-tabs v-model="activeTab" @tab-click="handleChangeTab">
        <el-tab-pane :label="tabs[0].text" name="first">
          <PreviewView v-model="response.body">
            <template v-slot:head-start>{{ dataTitle }}</template>
          </PreviewView>
        </el-tab-pane>
        <el-tab-pane :label="tabs[1].text" name="second">
          <ParamsView v-model="response.header">
            <template v-slot:head-start>{{ dataTitle }}</template>
          </ParamsView>
        </el-tab-pane>
        <el-tab-pane :label="tabs[2].text" name="third">
          <ParamsView v-model="response.state">
            <template v-slot:head-start>{{ dataTitle }}</template>
          </ParamsView>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { objecter } from '@daelui/dogjs/dist/components.js'
import PreviewView from '../data/preview.vue'
import ParamsView from '../data/params.vue'
import interfaceTpl from '../constant/interface.js'
import responseValue from '../constant/response-value.js'

export default {
  components: {
    PreviewView,
    ParamsView
  },

  props: {
    value: {
      default () {
        return objecter.clone(interfaceTpl)
      }
    }
  },

  data() {
    return {
      tabs: [
        {text: 'Body', value: 'first'},
        {text: 'Headers', value: 'second'},
        {text: '实例', value: 'third'}
      ],
      activeTab: 'first',
      dataTitle: '',
      response: objecter.clone(responseValue),
      form: {},
      statusList: [
        {label: '200', value: 200},
        {label: '201', value: 201},
        {label: '202', value: 202},
        {label: '204', value: 204},
        {label: '400', value: 400},
        {label: '401', value: 401},
        {label: '403', value: 403},
        {label: '404', value: 404},
        {label: '410', value: 410},
        {label: '422', value: 422},
        {label: '500', value: 500},
        {label: '502', value: 502},
        {label: '503', value: 503},
        {label: '504', value: 504}
      ]
    }
  },

  watch: {
    'value.response': {
      deep: true,
      handler () {
        // let response = (this.value.response.examples || [])[0] || objecter.clone(responseValue)
        // this.response = response
        this.refresh()
      }
    }
  },

  beforeMount () {
    this.handleChangeTab()
  },

  methods: {
    // 切换页签
    handleChangeTab(){
      let activeTab = this.activeTab
      let node = this.tabs.find(item => item.value === activeTab)|| {}
      this.dataTitle = node.text
    },
    // 刷新
    refresh () {

    },
    // 格式化时间
    getStatusClass (res) {
      return res.code >= 200 && res.code <= 300 ? 'text-success' : 'text-danger'
    },
    // 格式化时间
    getFormatTime (res) {
      let timestamp = res.timestamp || { start: 0, end: 0 }
      let time = timestamp.end - timestamp.start
      let result = time < 1000 ?
        time + 'ms' : time < 60 * 1000 ?
        time / 1000 + 's' :
        time / 60 * 1000 + 'min'
      return result
    },
    // 格式化大小
    getFormatSize (res) {
      let body = res.body || ''
      length = String(body).length
      let result = length < 1024 ?
        length + 'B' : length < 1024 * 1024 ?
        (length / 1024).toFixed(3) + 'KB' :
        (length / 1024 * 1024).toFixed(3) + 'MB'
      return result
    }
  }
}
</script>

<style lang="less" scoped>
.panel-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  font-weight: 700;
  color: #666;
  font-style: italic;
  .title-end {
    font-weight: 400;
    font-size: 12px;
    font-style: normal;
  }
  .span-item  {
    padding: 0 4px;
  }
  .span-item + .span-item {
    border-left: 1px solid #DCDFE6;
  }
}
.view-panel {
  position: relative;
  /deep/.el-tabs__header {
    margin-bottom: 8px;
  }
  .tabs-menu {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /deep/.el-select {
      width: 90px;
    }
    /deep/.el-form-item__label {
      padding-right: 4px;
    }
    /deep/.el-form-item--mini.el-form-item,
    /deep/.el-form-item--small.el-form-item {
      margin-bottom: 0;
    }
    .menu-action {
      cursor: pointer;
      margin-left: 8px;
    }
  }
}
</style>

<style lang="less">
.text-success {
  color: #67C23A;
}
.text-danger {
  color: #F56C6C;
}
</style>